<template>
  <div class="dashboard-container">
    <!-- 用户信息 -->
    <el-row class="mb-6">
      <el-card class="w-full">
        <div class="flex justify-between flex-wrap">
          <div class="flex items-center">
            <img
              class="user-avatar"
              :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
            />
            <span class="ml-[10px] text-[16px]">
              {{ userStore.nickname }}
            </span>
          </div>

          <div class="leading-[40px]">
            {{ greetings }}
          </div>
        </div>
      </el-card>
    </el-row>

    <div class="w-full" v-loading="loading">
      <div class="flex flex-wrap w-full mb-6" v-if="statisticalData">
        <div
          class="group flex justify-between items-center cursor-pointer bg-white min-w-170px mx-auto h-26 w-9/50 px-6"
        >
          <svg-icon
            icon-class="eye"
            class="text-red-600 group-hover:bg-red-600 group-hover:text-white p-2 rounded-lg"
            size="4.5em"
            @click="router.push('/log/loginLog')"
          />
          <div class="text-center">
            <div class="text-slate-500">今日IP数：</div>
            <span class="text-slate-950">{{ statisticalData?.today }}</span>
          </div>
        </div>
        <div
          v-for="item in statisticalData?.stats"
          :key="item.id"
          class="group flex justify-between items-center cursor-pointer bg-white min-w-170px mx-auto h-26 w-9/50 pl-6 pr-9"
        >
          <svg-icon
            :icon-class="getStatsIcon(item)"
            class="p-2 rounded-lg"
            :class="getStatsColor(item)"
            size="4.5em"
            @click="routeHopping(item.id)"
          />
          <div class="text-center">
            <div class="text-slate-500">
              {{
                item.id === 1
                  ? "资源数:"
                  : item.id === 2
                  ? "文章数:"
                  : item.id === 3
                  ? "提问数:"
                  : "评论数:"
              }}
            </div>
            <span class="text-slate-950">{{ item.quantity }}</span>
          </div>
        </div>
      </div>

      <div class="flex flex-wrap w-full mb-6" v-if="statisticalData">
        <pie-chart
          id="posting"
          :data="statisticalData?.pCategoricalDataVos"
          title="文章统计表"
          name="文章所占数量"
          class="mx-auto"
          className="w-2/5"
        />
        <pie-chart
          id="resource"
          :data="statisticalData?.rCategoricalDataVos"
          title="资源统计表"
          name="资源所占数量"
          class="mx-auto"
          className="w-2/5"
        />
      </div>
      <div class="w-full" v-if="statisticalData">
        <BarChart
          class="w-full"
          :pvData="statisticalData?.pv"
          :uvData="statisticalData?.uv"
          title="资源统计表"
          name="资源所占数量"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default { name: "Dashboard" };
</script>

<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
import { reqStatisticalData } from "@/api/stats";
import SvgIcon from "@/components/SvgIcon/index.vue";
import PieChart from "./components/PieChart.vue";
import BarChart from "./components/BarChart.vue";
import { StatisticalDataType, statsType } from "@/api/stats/type";
import router from "@/router";

onMounted(() => {
  getStatisticalData();
});

const userStore = useUserStore();

const date: Date = new Date();
const loading = ref<boolean>(false);
const statisticalData = ref<StatisticalDataType>();

const getStatisticalData = async () => {
  try {
    loading.value = true;
    const { data } = await reqStatisticalData();
    statisticalData.value = data;
  } catch (error) {
    Promise.reject(error);
  } finally {
    loading.value = false;
  }
};

const greetings = computed(() => {
  if (date.getHours() >= 6 && date.getHours() < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (date.getHours() >= 8 && date.getHours() < 12) {
    return "上午好🌞！";
  } else if (date.getHours() >= 12 && date.getHours() < 18) {
    return "下午好☕！";
  } else if (date.getHours() >= 18 && date.getHours() < 24) {
    return "晚上好🌃！";
  } else if (date.getHours() >= 0 && date.getHours() < 6) {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

const getStatsIcon = (item: statsType) => {
  switch (item.id) {
    case 2:
      return "document";
    case 3:
      return "question";
    case 4:
      return "message";
    default:
      return "download";
  }
};

const getStatsColor = (item: statsType) => {
  switch (item.id) {
    case 2:
      return "text-amber-400 group-hover:bg-amber-400 group-hover:text-white";
    case 3:
      return "text-violet-400 group-hover:bg-violet-400 group-hover:text-white";
    case 4:
      return "text-emerald-400 group-hover:bg-emerald-400 group-hover:text-white";
    default:
      return "text-cyan-400 group-hover:bg-cyan-400 group-hover:text-white";
  }
};

const routeHopping = (id: number) => {
  switch (id) {
    case 1:
      router.push("/resource/resource/admin");
      break;
    case 2:
      router.push("/resource/resource/blog");
      break;
    // case 3: router.push('') ;break
    case 4:
      router.push("/resource/comment");
      break;
    default:
      ElMessage.error("类型错误！");
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>
